@namespace Microsoft.FluentUI.AspNetCore.Components
@using Microsoft.AspNetCore.Components.Rendering;
@inherits FluentComponentBase

@if (!String.IsNullOrEmpty(CustomId))
{
    <style>@CustomStyle</style>
}


@if (Loading && IconStart == null && IconEnd == null)
{
    <span class="loading-button">
        @_renderButton
        
            <FluentProgressRing />
        
    </span>
}
else
{
    @_renderButton
}

@code{
    protected void RenderButton(RenderTreeBuilder __builder)
    {
        <fluent-button @ref=Element
               class="@Class"
               style="@Style"
               autofocus=@Autofocus
               form=@FormId
               formaction=@Action
               formenctype=@Enctype
               formmethod=@Method
               formnovalidate=@NoValidate
               formtarget=@Target
               type=@Type.ToAttributeValue()
               id=@Id
               value=@Value
               current-value=@CurrentValue
               disabled=@(Disabled || Loading)
               name=@Name
               required=@Required
               aria-label=@Title
               title=@Title
               appearance=@Appearance.ToAttributeValue()
               custom-id="@CustomId"
               @onclick="@OnClickHandlerAsync"
               @attributes="AdditionalAttributes">
    @if (IconStart != null)
    {
        if (Loading)
        {
            <FluentProgressRing slot="start" Style="@RingStyle(IconStart)" />
        }
        else
        {
            <FluentIcon Value="@(IconStart.InverseColor(Appearance == AspNetCore.Components.Appearance.Accent))"
                        Slot="@(ChildContent != null ? "start" : null)" />
        }
    }
    @ChildContent
    @if (IconEnd != null)
    {
        if (Loading && IconStart == null)
        {
            <FluentProgressRing slot="end" Style="@RingStyle(IconEnd)" />
        }
        else
        {
            <FluentIcon Value="@(IconEnd.InverseColor(Appearance == AspNetCore.Components.Appearance.Accent))"
                        Slot="@(ChildContent != null ? "end" : null)" />
        }
    }
</fluent-button>
    }
}